<template>
  <div class="ContentView">
    <HeaderView :auth="auth" />
    <!--头部header-->
    <div class="main">
      <div class="navigatePanel" v-loading="navigateList.length < 1">
        <el-menu
          background-color="#003A62"
          text-color="#ffffff"
          :default-active="$route.path"
          active-text-color="#ffffff"
          unique-opened
          class="el-menu-vertical-demo"
          router
          @open="handleOpen"
          @close="handleClose"
        >
          <Navigation
            v-if="navigateList && navigateList.length > 0"
            v-for="(item, index) in navigateList"
            :key="index"
            :navigateList="item"
          />
        </el-menu>
      </div>
      <div class="contentPanel">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderView from './Head/HeaderView'
import Navigation from './Navigation/NavigationView'
import * as cookie from '../js/cookie'
export default {
  name: 'ContentView',
  props: ['auth'],
  data () {
    return {
      loading: false,
      navigateList: []
      // navigateFaKey: '/Personnel',
      // navigateKey: '/PersonnelManagement/PersonnelManagementPage',
      // headerList: {
      //   faList: [],
      //   chList: []
      // },
      // fameta: '',
      // chmeta: '',
      // fapath: '',
      // chpath: ''
    }
  },
  mounted () {
    // this.handelSelect()
  },
  methods: {
    handleOpen (key, keyPath) {
      this.navigateFaKey = key
    },
    handleClose (key, keyPath) {
    },
    // handelSelect (key, keyPath) {
    //   // console.log('this.navigateList', this.navigateList)
    //   if (key !== undefined) {
    //     this.navigateKey = key
    //   }
    //   // console.log('this.navigateKey', this.navigateKey)
    //   // console.log('this.navigateFaKey', this.navigateFaKey)
    //   // 查找首项
    //   for (var k = 0; k < this.navigateList.length; k++) {
    //     if (this.navigateList[k].path !== undefined) {
    //       if (this.navigateList[k].path === this.navigateFaKey) {
    //         console.log('father', this.navigateList[k].path)
    //         this.headerList.faList = this.navigateList[k]
    //         this.fameta = this.navigateList[k].meta
    //         this.fapath = this.navigateList[k].path
    //         console.log(this.fameta)
    //       }
    //     }
    //   }

    //   // 查找子项
    //   for (var i = 0; i < this.navigateList.length; i++) {
    //     if (this.navigateList[i].children !== undefined) {
    //       for (var j = 0; j < this.navigateList[i].children.length; j++) {
    //         if (this.navigateList[i].children[j].path === this.navigateKey) {
    //           console.log('chindern', this.navigateList[i].children[j].path)
    //           this.headerList.chList = this.navigateList[i].children[j]
    //           this.chmeta = this.navigateList[i].children[j].meta
    //           this.chpath = this.navigateList[i].children[j].path
    //         }
    //       }
    //     }
    //   }
    //   // console.log('Header.navigateList', this.navigateList.children[this.index])
    // },
    // changeheader () {
    //   this.fameta = '人员管理'
    //   this.chmeta = '人员列表'
    //   this.fapath = '/Personnel'
    //   this.chpath = '/PersonnelManagement/PersonnelManagementPage'
    //   console.log('inchangeheader')
    // },
    islogin () {
      // 判断用户是否登录
      var userName = cookie.getCookie('userName')
      if (userName === '' || userName == null) {
        this.$router.push('/login')
      }
    },
    // 获取导航数据
    getNavList () {
      let that = this
      let list = this.$router.options.routes
      let routes = []
      for (let i = 0; i < list.length; i++) {
        if (list[i].name !== '/') {
          routes.push(list[i])
        }
      }
      let arr = routes
      that.navigateList = arr
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].children) {
          this.listLoop(arr[i].children)
        }
      }
      that.navigateList = arr
    },
    // 递归遍历导航树
    listLoop (list) {
      if (list) {
        list.forEach((item) => {
          item.hidden = this.isAuthorization(item)
          if (item.children && item.children.length > 0) {
            this.listLoop(item.children)
          }
        })
      }
    },
    // 是否满足权限
    isAuthorization (item) {
      let isExist = false
      if (!item.hidden) {
        if (isExist) {
          isExist = true
        }
      } else {
        isExist = true
      }
      return isExist
    }
  },
  created () {
    this.islogin()
    this.getNavList()
  },
  components: {
    HeaderView,
    Navigation
  }
}
</script>

<style scoped>
.ContentView {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  display: flex;
}
.navigatePanel {
  width: 224px;
  height: 100%;
  border-right: 1px solid rgba(238, 241, 146, 0.3);
  overflow-x: hidden;
}
.navigatePanel .el-menu {
  width: 244px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #001529;
  padding-bottom: 60px;
  box-sizing: border-box;
}
.contentPanel {
  flex: 1;
  overflow-x: hidden;
  padding: 20px;
  box-sizing: border-box;
  background-color: #003a62;
}
.navigatePanel li {
  width: 224px !important;
}
</style>
